<template>
  <div class="image-list">
    <div
      class="image-item"
      v-for="(item, index) in props.imageList"
      v-bind:key="index"
    >
      <div class="image-preview">
        <img class="image-image" v-lazy-src="item?.imageUrl" />
      </div>
      <div class="image-info">
        <div class="image-title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  imageList: {
    title: string;
    imageUrl: string;
  }[];
}>();
</script>
<style>
.image-list {
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.image-image {
  width: 500px;
  height: 500px;
}
</style>
